<template>
    <div>
        <!-- 搜索表单部分保持不变 -->
        <el-form :inline="true" :model="formInline" class="demo-form-inline">
            <el-form-item label="角色名称:">
                <el-input v-model="formInline.name" placeholder="请输入角色名称" clearable />
            </el-form-item>
            <el-form-item label="角色标识">
                <el-input v-model="formInline.identity" placeholder="请选择角色标识" clearable />
            </el-form-item>
            <el-form-item label="状态">
                <el-select v-model="formInline.status" placeholder="请选择状态" clearable>
                    <el-option label="开" :value="true" />
                    <el-option label="关" :value="false" />
                </el-select>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="onQuery">
                    <el-icon>
                        <Search />
                    </el-icon>搜索
                </el-button>
                <el-button @click="onReset">
                    <el-icon>
                        <Refresh />
                    </el-icon>重置
                </el-button>
            </el-form-item>
        </el-form>

        <el-card>
            <!-- 标题部分保持不变 -->
            <div class="title">
                <h4>角色列表</h4>
                <div>
                    <el-button type="primary" @click="onAdd">
                        <el-icon>
                            <CirclePlus />
                        </el-icon>新增角色
                    </el-button>
                    <el-icon style="margin: 0 20px;">
                        <Clock />
                    </el-icon>
                    <el-icon style="margin-right:20px;">
                        <Clock />
                    </el-icon>
                    <el-icon style="margin-right:20px;">
                        <Clock />
                    </el-icon>
                </div>
            </div>

            <!-- 替换为自定义列表组件 -->
            <TableWithPagination :table-data="tableData" :columns="tableColumns" :total="total" :current-page="current"
                :page-size="size" @size-change="handleSizeChange" @current-change="handleCurrentChange">
                <!-- 状态列自定义模板 -->
                <template #status="{ row }">
                    {{ row.status ? '开' : '关' }}
                </template>

                <!-- 操作列自定义模板 -->
                <template #operation="{ row }">
                    <el-button link type="primary" size="small" @click="onEdit(row)">
                        修改
                    </el-button>
                    <el-popconfirm title="是否需要删除?" @confirm="onConfirm(row)" placement="bottom" :teleported="false"
                        effect="light" trigger="hover" width="auto">
                        <template #reference>
                            <el-button link type="primary" size="small">删除</el-button>
                        </template>
                    </el-popconfirm>
                </template>
            </TableWithPagination>
        </el-card>

        <!-- 弹窗部分保持不变 -->
        <el-dialog v-model="dialogFormVisible" :title="flag ? '新增角色' : '编辑角色'" width="500">
            <el-form :model="form" label-width="80px" :rules="rules">
                <el-form-item label="角色名称" prop="name">
                    <el-input v-model="form.name" autocomplete="off" placeholder="请输入角色名称" />
                </el-form-item>
                <el-form-item label="角色标识" prop="identity">
                    <el-input v-model="form.identity" autocomplete="off" />
                </el-form-item>
                <el-form-item label="备注">
                    <el-input v-model="form.remark" type="textarea" />
                </el-form-item>
            </el-form>
            <template #footer>
                <div class="dialog-footer">
                    <el-button @click="dialogFormVisible = false">取消</el-button>
                    <el-button type="primary" @click="onSure">确认</el-button>
                </div>
            </template>
        </el-dialog>
    </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { ElMessage } from 'element-plus'
import { Search, Refresh, CirclePlus, Clock } from '@element-plus/icons-vue'
import request from '@/utils/request.js'
// 引入自定义列表组件
import TableWithPagination from '@/components/ExTable.vue'

// 响应式数据（新增表格列配置）
const total = ref(0)
const page = ref(1)
const size = ref(10)
const current = ref(1)
const tableData = ref([])
const dialogFormVisible = ref(false)
const flag = ref(true)
const editId = ref('')

// 表格列配置（对应原el-table-column）
const tableColumns = ref([
    { fixed: true, prop: 'id', label: '角色编号', width: 180 },
    { prop: 'name', label: '角色名称', width: 100 },
    { prop: 'identity', label: '角色标识', width: 120 },
    { prop: 'status', label: '状态', width: 120, slot: 'status' }, // 自定义模板插槽
    { prop: 'remark', label: '备注', showOverflowTooltip: true },
    { prop: 'createtime', label: '创建时间', width: 180 },
    { fixed: 'right', label: '操作', width: 120, slot: 'operation' } // 操作列插槽
])

const formInline = ref({
    name: '',
    identity: '',
    status: ''
})

const form = ref({
    name: '',
    identity: '',
    remark: ''
})

const rules = ref({
    name: [{ required: true, message: '请输入角色名称', trigger: 'blur' }],
    identity: [{ required: true, message: '请输入角色标识', trigger: 'blur' }]
})

// 所有方法保持不变
const getList = async () => {
    try {
        const res = await request.get('/role/list', { params: { ...formInline.value, page: page.value, size: size.value } })
        tableData.value = res.data.data
        total.value = res.data.total
    } catch (error) {
        console.error('获取列表失败:', error)
    }
}

const onQuery = () => getList()

const onReset = () => {
    formInline.value = { name: '', identity: '', status: '' }
    page.value = 1
    size.value = 10
    getList()
}

const handleSizeChange = (val) => {
    size.value = val
    current.value = 1
    page.value = 1
    getList()
}

const handleCurrentChange = (val) => {
    current.value = val
    page.value = val
    getList()
}

const onAdd = () => {
    dialogFormVisible.value = true
    flag.value = true
    form.value = { name: '', identity: '', remark: '' }
}

const onSure = async () => {
    try {
        const url = flag.value ? '/role/add' : '/role/edit'
        const params = flag.value ? form.value : { ...form.value, id: editId.value }
        const res = await request.post(url, params)
        if (res.data.code === 200) {
            ElMessage({ message: flag.value ? '新增成功' : '修改成功', type: 'success' })
            dialogFormVisible.value = false
            getList() // 修复原代码注释的刷新逻辑
        }
    } catch (error) {
        console.error('操作失败:', error)
    }
}

const onEdit = (row) => {
    dialogFormVisible.value = true
    flag.value = false
    form.value = { name: row.name, identity: row.identity, remark: row.remark }
    editId.value = row.id
}

const onConfirm = async (row) => {
    try {
        const res = await request.post('/role/delete', { id: row.id })
        if (res.data.code === 200) {
            ElMessage({ message: '删除成功', type: 'success' })
            getList()
        }
    } catch (error) {
        console.error('删除失败:', error)
    }
}

onMounted(() => getList())
</script>

<style lang="scss" scoped>
.demo-form-inline .el-input {
    --el-input-width: 220px;
}

.demo-form-inline .el-select {
    --el-select-width: 220px;
}

.title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}
</style>